import { defineComponent, ref, reactive, computed, watchEffect } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: 'HelloWorld',
  setup(props, ctx) {
    const router = useRouter()
    const text = ref('hello world.')
    let count = ref(0)
    // count++
    count.value++
    const info = reactive({
      count: 100
    })
    info.count++

    function inc() {
      count.value++
    }

    function inc2(val) {
      console.log('inc2:', val)
    }

    function handleInput(e, val) {
      console.log('e:', e)
      console.log('val:', val)
      count.value = 1
    }

    // 路由跳转
    function jumpTo() {
      router.push('/demo-page')
    }

    // 关于计算属性
    const plusOne = computed(() => (`computed:${count.value}`))

    // watchEffect
    watchEffect(() => console.log('watch change:', count.value))

    return () => (
      <div>
        <p>{text.value}</p>
        <p>{count.value}</p>
        <p>{info.count}</p>
        <p>计算属性: {plusOne.value}</p>
        {/*默认插槽*/}
        <div>{ctx.slots.default && ctx.slots.default()}</div>
        {/*具名插槽*/}
        <div>{ctx.slots.name && ctx.slots.name()}</div>
        <button onClick={inc}>add</button>
        <button onClick={() => {inc2('123')}}>add2</button>
        <p><button onClick={jumpTo}> jump to demo page</button></p>
        <p>The count:</p>
        <p style="with: 200px">{ count.value }</p>
        <p><input v-model={ count.value } /></p>
        <p><input value={ count.value } on-input={handleInput} /></p>
      </div>
    )
  }
})
